<template>
  <div id="userItem">
    <el-container>
      <el-aside width="200px">
        <div class="title">
          <img v-if="$store.getters.getUserType == 'server'" :src="$store.getters.getInfo.ser_avatar">
        </div>
        <div class="navButton">
          <el-menu
                  :default-active='$route.meta.serActive'
                  class="el-menu-vertical-demo"
                  background-color="#2368ba"
                  text-color="#e7d9d9"
                  active-text-color="#ffd04b">
            <el-menu-item index="0"
                          @click="changeRouter(tab[0].path)">
              <i class="el-icon-menu"></i>
              <span slot="title" style="font-size: 16px">{{tab[0].name}}</span>
            </el-menu-item>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{tab[1].name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item @click="changeRouter(tab[1].children[0].path)"
                              index="1">
                  {{tab[1].children[0].name}}
                </el-menu-item>

                <el-menu-item @click="changeRouter(tab[1].children[1].path)"
                              index="2">
                  {{tab[1].children[1].name}}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

              <el-menu-item index="3"
                            @click="changeRouter(tab[2].path)">
                <i class="el-icon-menu"></i>
                <span slot="title" style="font-size: 16px">{{tab[2].name}}</span>
              </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <slot name="main"></slot>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "UserItem",
    methods:{
      changeRouter(path){
        this.$router.push(path)
      }
    },
    data(){
      return{
        tab:[
          {
            name:'账户管理',
            path:'/server/account'
          },
          {
            name:'订单管理',
            children:[
              {
                name: '我的订单',
                path: '/server/myOrder',
              },
              {
                name: '订单中心',
                path: '/server/orderCenter',
              }
            ]
          },
          {
            name:'消息管理',
            path:'/server/message'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  #userItem{
    /*height: 800px;*/
  }
  /deep/.el-aside {
    /*background-color: #2368ba;*/
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
    /*line-height: 82px;*/
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
  }

  .title{
    width: 100%;
    height: 100px;
    line-height: 100px;
    border-bottom: 2px solid #0f4984;
    /*background-color: #225793;*/
    color: #e8e5e5;
  }
  .el-button{
    width: 150px;
    margin: 15px auto;
    font-size: 18px;
  }
  h2{
    margin: 0;
  }
  img{
    width: 120px;
    height: 90px;
    border-radius: 50%;
    vertical-align: middle;
  }
</style>